<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>弹性布局</title>

        <style type="text/css">
            .container { 
                display: flex ; 
                flex-flow: row wrap ; 
                justify-content: space-between ;
                align-content : space-around ;
                width: 800px ; 
                height: 400px ; 
                border: 2px solid blue ; 
                margin: 25px auto ;
            }
            .container>.item { 
                width: 18% ; 
                height: 50px ; 
                background: orange ; 
            }
        </style>
        
    </head>

    <body>

        <div class="container">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>

    </body>

</html>